<template>
  <div class="main-box">
    <el-form :inline="true" :model="form" size="small">
      <el-form-item class="sel-len" label="APP" size="small">
        <el-select v-model="app" placeholder="请选择" size="small" style="margin-right: 10px; width: 170px;">
          <el-option v-for="item in form.apps" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="sel-len" label="平台" size="small">
        <el-select v-model="plat" placeholder="请选择" size="small" @change="changPlat">
          <el-option v-for="item in form.plats" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item class="sel-len" label="时间" size="small">
        <el-radio-group v-model="form.timeSelect" @change="changHour">
          <el-radio-button label="1h"></el-radio-button>
          <el-radio-button label="6h"></el-radio-button>
          <el-radio-button label="1d"></el-radio-button>
          <el-radio-button label="8d"></el-radio-button>
          <el-radio-button label="14d"></el-radio-button>
          <el-radio-button label="30d"></el-radio-button>          
        </el-radio-group>
      </el-form-item>
      <el-form-item class="sel-len" label="自动刷新" size="small">
        <el-switch
          v-model="autorefresh"
          active-color="#13ce66" @change="changerefresh">
        </el-switch>        
      </el-form-item>
    </el-form>
    <el-row>
      <el-col :span="12" style="height:300px;">
        <div id="line-echart" style="width: 100%; height:100%;" v-loading="lineLoading"></div>
      </el-col>
      <el-col :span="12" style="height:300px;">
        <div id="request-echart" style="width: 100%; height:100%;" v-loading="requestLoading"></div>
      </el-col>      
    </el-row>
    <el-row>
      <el-col :span="12" style="height:300px;">
        <div id="success-echart" style="width: 100%; height:100%;" v-loading="successLoading"></div>
      </el-col>
      <el-col :span="12" style="height:300px;">
        <div id="delay-echart" style="width: 100%; height:100%;" v-loading="delayLoading"></div>
      </el-col>      
    </el-row>          
    <el-row>
      <el-col :span="17">
        <div id="map-echart" style="height: 420px;" v-loading="mapLoading"></div>
      </el-col>
      <el-col :span="7">
        <el-tabs v-model="activeName" @tab-click="handleClick" v-loading="barLoading">
          <el-tab-pane label="最慢的10个城市" name="city">
            <div id="slowest-cities-echart" style="width: 100%; height: 350px;"></div>
          </el-tab-pane>
          <el-tab-pane label="最慢的10个省份" name="area">
            <div id="slowest-areas-echart" style="width: 100%; height: 350px;"></div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>

    <el-dialog :visible.sync="optionVisible" :fullscreen="true" :center="true">
      <span slot="title">
        <el-button class="defined-close-btn" type="primary" @click="optionVisible = false">返回</el-button>
      </span>
      <el-table :data="errorList.data">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="right" inline class="table-form-expand">
              <el-form-item>
                <label>服务端时间</label>
                <span>{{ props.row.serviceTime }}</span>
              </el-form-item>
              <el-form-item>
                <label>osId</label>
                <span v-if="props.row.osId === '1'">Android</span>
                <span v-else-if="props.row.osId === '2'">IOS</span>
                <span v-else-if="props.row.osId === '3'">H5</span>
                <span v-else>{{ props.row.osId }}</span>
              </el-form-item>
              <el-form-item>
                <label>响应状态码</label>
                <span>{{ props.row.status }}</span>
              </el-form-item>
              <el-form-item>
                <label>运行商</label>
                <span>{{ props.row.operator }}</span>
              </el-form-item>
              <el-form-item class="line-block">
                <label>原始内容</label>
                <span class="line-break">{{ props.row.content }}</span>
              </el-form-item>
              <el-form-item>
                <label>城市</label>
                <span>{{ props.row.city }}</span>
              </el-form-item>
              <el-form-item>
                <label>省份</label>
                <span>{{ props.row.province }}</span>
              </el-form-item>
              <el-form-item>
                <label>国家</label>
                <span>{{ props.row.nation }}</span>
              </el-form-item>
              <el-form-item>
                <label>客户端IP</label>
                <span>{{ props.row.iP }}</span>
              </el-form-item>
              <el-form-item>
                <label>客户端时间</label>
                <span>{{ props.row.time }}</span>
              </el-form-item>
              <el-form-item>
                <label>响应时间</label>
                <span>{{ props.row.responseTime }}</span>
              </el-form-item>
              <el-form-item>
                <label>返回大小</label>
                <span>{{ props.row.contentLength }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备分辨率</label>
                <span>{{ props.row.screen }}</span>
              </el-form-item>
              <el-form-item>
                <label>操作系统版本</label>
                <span>{{ props.row.osVersion }}</span>
              </el-form-item>
              <el-form-item>
                <label>操作系统</label>
                <span>{{ props.row.os === '2' ? 'Android' : props.row.os }}</span>
              </el-form-item>
              <el-form-item>
                <label>网络类型</label>
                <span>{{ props.row.netType }}</span>
              </el-form-item>
              <el-form-item>
                <label>model</label>
                <span>{{ props.row.model }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备型号</label>
                <span>{{ props.row.machineModel }}</span>
              </el-form-item>
              <el-form-item>
                <label>imei</label>
                <span>{{ props.row.imei }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备id</label>
                <span>{{ props.row.deviceId }}</span>
              </el-form-item>
              <el-form-item>
                <label>设备品牌</label>
                <span>{{ props.row.brand }}</span>
              </el-form-item>
              <el-form-item class="line-block">
                <label>内核版本</label>
                <span>{{ props.row.coreVersion }}</span>
              </el-form-item>
              <el-form-item>
                <label>页面相对路径</label>
                <span>{{ props.row.uRI }}</span>
              </el-form-item>
              <el-form-item>
                <label>应用id</label>
                <span>{{ props.row.appId }}</span>
              </el-form-item>
              <el-form-item>
                <label>应用版本</label>
                <span>{{ props.row.appVersion }}</span>
              </el-form-item>
              <el-form-item>
                <label>应用名称</label>
                <span>{{ props.row.appName }}</span>
              </el-form-item>
              <el-form-item>
                <label>dpid</label>
                <span>{{ props.row.dpid }}</span>
              </el-form-item>
              <el-form-item>
                <label>用户卡号</label>
                <span>{{ props.row.userID }}</span>
              </el-form-item>
            </el-form>
          </template> 
        </el-table-column>
        <el-table-column property="serviceTime" label="服务端时间" min-width="180" :formatter="formatTime"></el-table-column>
        <el-table-column property="osId" label="osId" min-width="100">
          <template slot-scope="scope">
            <span v-if="scope.row.osId === '1'">Android</span>
            <span v-else-if="scope.row.osId === '2'">IOS</span>
            <span v-else-if="scope.row.osId === '3'">H5</span>
            <span v-else>{{scope.row.osId}}</span>
          </template>
        </el-table-column>
        <el-table-column property="status" label="响应状态码" min-width="100"></el-table-column>
        <el-table-column property="operator" label="运行商" min-width="100"></el-table-column>
        <el-table-column property="city" label="城市" min-width="80"></el-table-column>
        <el-table-column property="province" label="省份" min-width="80"></el-table-column>
        <el-table-column property="nation" label="国家" min-width="80"></el-table-column>
        <el-table-column property="iP" label="客户端IP" min-width="140"></el-table-column>
        <el-table-column property="time" label="客户端时间" min-width="180" :formatter="formatTime"></el-table-column>
        <el-table-column property="responseTime" label="响应时间" min-width="110"></el-table-column>
        <el-table-column property="contentLength" label="返回大小" min-width="80"></el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="errorList.currPage"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="errorList.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="errorList.totalCount">
      </el-pagination>
    </el-dialog>

  </div>
</template>

<script>
  import echarts from 'echarts'
  import 'echarts/map/js/china.js'
  import lodash from 'lodash'
  import moment from 'moment'
  const baseUrl = ''
  // 平台
  var apps = [
    {
      value: 'app',
      label: '无限极中国APP2.0'
    }
  ]
  var plats = [
    { value: '', label: '全部' },
    { value: 'android', label: 'Android' },
    { value: 'ios', label: 'iOS' }
  ]
  // map坐标位置
  var geoCoordMap = {
    '香港特别行政区': [114.08, 22.2],
    '澳门特别行政区': [113.33, 22.13],
    '台北': [121.5, 25.03],
    '基隆': [121.73, 25.13],
    '台中': [120.67, 24.15],
    '台南': [120.2, 23.0],
    '宜兰县': [121.75, 24.77],
    '桃园县': [121.3, 24.97],
    '苗栗县': [120.8, 24.53],
    '台中县': [120.72, 24.25],
    '彰化县': [120.53, 24.08],
    '南投县': [120.67, 23.92],
    '云林县': [120.53, 23.72],
    '台南县': [120.32, 23.32],
    '高雄县': [120.37, 22.63],
    '屏东县': [120.48, 22.67],
    '台东县': [121.15, 22.75],
    '花莲县': [121.6, 23.98],
    '澎湖县': [119.58, 23.58],
    '石家庄': [114.52, 38.05],
    '唐山': [118.2, 39.63],
    '秦皇岛': [119.6, 39.93],
    '邯郸': [114.48, 36.62],
    '邢台': [114.48, 37.07],
    '保定': [115.47, 38.87],
    '张家口': [114.88, 40.82],
    '承德': [117.93, 40.97],
    '沧州': [116.83, 38.3],
    '廊坊': [116.7, 39.52],
    '衡水': [115.68, 37.73],
    '太原': [112.55, 37.87],
    '大同': [113.3, 40.08],
    '阳泉': [113.57, 37.85],
    '长治': [113.12, 36.2],
    '晋城': [112.83, 35.5],
    '朔州': [112.43, 39.33],
    '晋中': [112.75, 37.68],
    '运城': [110.98, 35.02],
    '忻州': [112.73, 38.42],
    '临汾': [111.52, 36.08],
    '吕梁': [111.13, 37.52],
    '呼和浩特': [111.73, 40.83],
    '包头': [109.83, 40.65],
    '乌海': [106.82, 39.67],
    '赤峰': [118.92, 42.27],
    '通辽': [122.27, 43.62],
    '鄂尔多斯': [109.8, 39.62],
    '呼伦贝尔': [119.77, 49.22],
    '巴彦淖尔': [107.42, 40.75],
    '乌兰察布': [113.12, 40.98],
    '兴安盟': [122.05, 46.08],
    '锡林郭勒盟': [116.07, 43.95],
    '阿拉善盟': [105.67, 38.83],
    '沈阳': [123.43, 41.8],
    '大连': [121.62, 38.92],
    '鞍山': [122.98, 41.1],
    '抚顺': [123.98, 41.88],
    '本溪': [123.77, 41.3],
    '丹东': [124.38, 40.13],
    '锦州': [121.13, 41.1],
    '营口': [122.23, 40.67],
    '阜新': [121.67, 42.02],
    '辽阳': [123.17, 41.27],
    '盘锦': [122.07, 41.12],
    '铁岭': [123.83, 42.28],
    '朝阳': [120.45, 41.57],
    '葫芦岛': [120.83, 40.72],
    '长春': [125.32, 43.9],
    '吉林': [126.55, 43.83],
    '四平': [124.35, 43.17],
    '辽源': [125.13, 42.88],
    '通化': [125.93, 41.73],
    '白山': [126.42, 41.93],
    '松原': [124.82, 45.13],
    '白城': [122.83, 45.62],
    '延边朝鲜族自治州': [129.5, 42.88],
    '哈尔滨': [126.53, 45.8],
    '齐齐哈尔': [123.95, 47.33],
    '鸡西': [130.97, 45.3],
    '鹤岗': [130.27, 47.33],
    '双鸭山': [131.15, 46.63],
    '大庆': [125.03, 46.58],
    '伊春': [128.9, 47.73],
    '佳木斯': [130.37, 46.82],
    '七台河': [130.95, 45.78],
    '牡丹江': [129.6, 44.58],
    '黑河': [127.48, 50.25],
    '绥化': [126.98, 46.63],
    '大兴安岭地区': [124.12, 50.42],
    '南京': [118.78, 32.07],
    '无锡': [120.3, 31.57],
    '徐州': [117.18, 34.27],
    '常州': [119.95, 31.78],
    '苏州': [120.58, 31.3],
    '南通': [120.88, 31.98],
    '连云港': [119.22, 34.6],
    '淮安': [119.02, 33.62],
    '盐城': [120.15, 33.35],
    '扬州': [119.4, 32.4],
    '镇江': [119.45, 32.2],
    '泰州': [119.92, 32.45],
    '宿迁': [118.28, 33.97],
    '杭州': [120.15, 30.28],
    '宁波': [121.55, 29.88],
    '温州': [120.7, 28.0],
    '嘉兴': [120.75, 30.75],
    '湖州': [120.08, 30.9],
    '绍兴': [120.57, 30.0],
    '金华': [119.65, 29.08],
    '衢州': [118.87, 28.93],
    '舟山': [122.2, 30.0],
    '台州': [121.43, 28.68],
    '丽水': [119.92, 28.45],
    '合肥': [117.25, 31.83],
    '芜湖': [118.38, 31.33],
    '蚌埠': [117.38, 32.92],
    '淮南': [117.0, 32.63],
    '马鞍山': [118.5, 31.7],
    '淮北': [116.8, 33.95],
    '铜陵': [117.82, 30.93],
    '安庆': [117.05, 30.53],
    '黄山': [118.33, 29.72],
    '滁州': [118.32, 32.3],
    '阜阳': [115.82, 32.9],
    '宿州': [116.98, 33.63],
    '巢湖': [117.87, 31.6],
    '六安': [116.5, 31.77],
    '亳州': [115.78, 33.85],
    '池州': [117.48, 30.67],
    '宣城': [118.75, 30.95],
    '福州': [119.3, 26.08],
    '厦门': [118.08, 24.48],
    '莆田': [119.0, 25.43],
    '三明': [117.62, 26.27],
    '泉州': [118.67, 24.88],
    '漳州': [117.65, 24.52],
    '南平': [118.17, 26.65],
    '龙岩': [117.03, 25.1],
    '宁德': [119.52, 26.67],
    '南昌': [115.85, 28.68],
    '景德镇': [117.17, 29.27],
    '萍乡': [113.85, 27.63],
    '九江': [116.0, 29.7],
    '新余': [114.92, 27.82],
    '鹰潭': [117.07, 28.27],
    '赣州': [114.93, 25.83],
    '吉安': [114.98, 27.12],
    '宜春': [114.38, 27.8],
    '抚州': [116.35, 28.0],
    '上饶': [117.97, 28.45],
    '济南': [116.98, 36.67],
    '青岛': [120.38, 36.07],
    '淄博': [118.05, 36.82],
    '枣庄': [117.32, 34.82],
    '东营': [118.67, 37.43],
    '烟台': [121.43, 37.45],
    '潍坊': [119.15, 36.7],
    '济宁': [116.58, 35.42],
    '泰安': [117.08, 36.2],
    '威海': [122.12, 37.52],
    '日照': [119.52, 35.42],
    '莱芜': [117.67, 36.22],
    '临沂': [118.35, 35.05],
    '德州': [116.3, 37.45],
    '聊城': [115.98, 36.45],
    '滨州': [117.97, 37.38],
    '郑州': [113.62, 34.75],
    '开封': [114.3, 34.8],
    '洛阳': [112.45, 34.62],
    '平顶山': [113.18, 33.77],
    '安阳': [114.38, 36.1],
    '鹤壁': [114.28, 35.75],
    '新乡': [113.9, 35.3],
    '焦作': [113.25, 35.22],
    '济源': [112.58, 35.07],
    '濮阳': [115.03, 35.77],
    '许昌': [113.85, 34.03],
    '漯河': [114.02, 33.58],
    '三门峡': [111.2, 34.78],
    '南阳': [112.52, 33.0],
    '商丘': [115.65, 34.45],
    '信阳': [114.07, 32.13],
    '周口': [114.65, 33.62],
    '驻马店': [114.02, 32.98],
    '神农架林区': [110.67, 31.75],
    '武汉': [114.3, 30.6],
    '黄石': [115.03, 30.2],
    '十堰': [110.78, 32.65],
    '宜昌': [111.28, 30.7],
    '鄂州': [114.88, 30.4],
    '荆门': [112.2, 31.03],
    '孝感': [113.92, 30.93],
    '荆州': [112.23, 30.33],
    '黄冈': [114.87, 30.45],
    '咸宁': [114.32, 29.85],
    '随州': [113.37, 31.72],
    '恩施土家族苗族自治州': [109.47, 30.3],
    '仙桃': [113.45, 30.37],
    '潜江': [112.88, 30.42],
    '天门': [113.17, 30.67],
    '长沙': [112.93, 28.23],
    '株洲': [113.13, 27.83],
    '湘潭': [112.93, 27.83],
    '衡阳': [112.57, 26.9],
    '邵阳': [111.47, 27.25],
    '岳阳': [113.12, 29.37],
    '常德': [111.68, 29.05],
    '张家界': [110.47, 29.13],
    '益阳': [112.32, 28.6],
    '郴州': [113.02, 25.78],
    '永州': [111.62, 26.43],
    '怀化': [110.0, 27.57],
    '娄底': [112.0, 27.73],
    '湘西土家族苗族自治州': [109.73, 28.32],
    '广州': [113.5107, 23.2196],
    '韶关': [113.6, 24.82],
    '深圳': [114.05, 22.55],
    '珠海': [113.57, 22.27],
    '汕头': [116.68, 23.35],
    '佛山': [113.12, 23.02],
    '江门': [113.08, 22.58],
    '湛江': [110.35, 21.27],
    '茂名': [110.92, 21.67],
    '肇庆': [112.47, 23.05],
    '惠州': [114.42, 23.12],
    '梅州': [116.12, 24.28],
    '汕尾': [115.37, 22.78],
    '河源': [114.7, 23.73],
    '阳江': [111.98, 21.87],
    '清远': [113.03, 23.7],
    '东莞': [113.75, 23.05],
    '中山': [113.38, 22.52],
    '潮州': [116.62, 23.67],
    '揭阳': [116.37, 23.55],
    '云浮': [112.03, 22.92],
    '南宁': [108.37, 22.82],
    '柳州': [109.42, 24.33],
    '防城港': [108.35, 21.7],
    '来宾': [109.23, 23.73],
    '崇左': [107.37, 22.4],
    '桂林': [110.28, 25.28],
    '梧州': [111.27, 23.48],
    '北海': [109.12, 21.48],
    '钦州': [108.62, 21.95],
    '贵港': [109.6, 23.1],
    '玉林': [110.17, 22.63],
    '百色': [106.62, 23.9],
    '贺州': [111.55, 24.42],
    '河池': [108.07, 24.7],
    '海口': [110.32, 20.03],
    '三亚': [109.5, 18.25],
    '五指山': [109.52, 18.78],
    '琼海': [110.47, 19.25],
    '儋州': [109.57, 19.52],
    '文昌': [110.8, 19.55],
    '万宁': [110.4, 18.8],
    '东方': [108.63, 19.1],
    '定安县': [110.32, 19.7],
    '屯昌县': [110.1, 19.37],
    '澄迈县': [110.0, 19.73],
    '临高县': [109.68, 19.92],
    '白沙黎族自治县': [109.45, 19.23],
    '昌江黎族自治县': [109.05, 19.25],
    '乐东黎族自治县': [109.17, 18.75],
    '陵水黎族自治县': [110.03, 18.5],
    '保亭黎族苗族自治县': [109.7, 18.63],
    '琼中黎族苗族自治县': [109.83, 19.03],
    '成都': [104.07, 30.67],
    '自贡': [104.78, 29.35],
    '攀枝花': [101.72, 26.58],
    '泸州': [105.43, 28.87],
    '德阳': [104.38, 31.13],
    '绵阳': [104.73, 31.47],
    '广元': [105.83, 32.43],
    '遂宁': [105.57, 30.52],
    '内江': [105.05, 29.58],
    '乐山': [103.77, 29.57],
    '南充': [106.08, 30.78],
    '眉山': [103.83, 30.05],
    '宜宾': [104.62, 28.77],
    '广安': [106.63, 30.47],
    '达州': [107.5, 31.22],
    '雅安': [103.0, 29.98],
    '巴中': [106.77, 31.85],
    '资阳': [104.65, 30.12],
    '阿坝藏族羌族自治州': [102.22, 31.9],
    '甘孜藏族自治州': [101.97, 30.05],
    '凉山彝族自治州': [102.27, 27.9],
    '贵阳': [106.63, 26.65],
    '六盘水': [104.83, 26.6],
    '遵义': [106.92, 27.73],
    '安顺': [105.95, 26.25],
    '铜仁': [109.18, 27.72],
    '毕节': [105.28, 27.3],
    '黔东南苗族侗族自治州': [107.97, 26.58],
    '黔南布依族苗族自治州': [107.52, 26.27],
    '昆明': [102.72, 25.05],
    '曲靖': [103.8, 25.5],
    '玉溪': [102.55, 24.35],
    '保山': [99.17, 25.12],
    '昭通': [103.72, 27.33],
    '丽江': [100.23, 26.88],
    '临沧': [100.08, 23.88],
    '楚雄彝族自治州': [101.55, 25.03],
    '红河哈尼族彝族自治州': [103.4, 23.37],
    '文山壮族苗族自治州': [104.25, 23.37],
    '西双版纳傣族自治州': [100.8, 22.02],
    '大理白族自治州': [100.23, 25.6],
    '德宏傣族景颇族自治州': [98.58, 24.43],
    '怒江傈僳族自治州': [98.85, 25.85],
    '迪庆藏族自治州': [99.7, 27.83],
    '拉萨': [91.13, 29.65],
    '山南地区': [91.77, 29.23],
    '日喀则': [88.88, 29.27],
    '那曲地区': [92.07, 31.48],
    '阿里地区': [80.1, 32.5],
    '西安': [108.93, 34.27],
    '铜川': [108.93, 34.9],
    '宝鸡': [107.13, 34.37],
    '咸阳': [108.7, 34.33],
    '渭南': [109.5, 34.5],
    '延安': [109.48, 36.6],
    '汉中': [107.02, 33.07],
    '榆林': [109.73, 38.28],
    '安康': [109.02, 32.68],
    '商洛': [109.93, 33.87],
    '兰州': [103.82, 36.07],
    '嘉峪关': [98.27, 39.8],
    '金昌': [102.18, 38.5],
    '白银': [104.18, 36.55],
    '天水': [105.72, 34.58],
    '武威': [102.63, 37.93],
    '张掖': [100.45, 38.93],
    '平凉': [106.67, 35.55],
    '酒泉': [98.52, 39.75],
    '庆阳': [107.63, 35.73],
    '定西': [104.62, 35.58],
    '陇南': [104.92, 33.4],
    '临夏回族自治州': [103.22, 35.6],
    '甘南藏族自治州': [102.92, 34.98],
    '西宁': [101.78, 36.62],
    '黄南藏族自治州': [102.02, 35.52],
    '海南藏族自治州': [100.62, 36.28],
    '果洛藏族自治州': [100.23, 34.48],
    '玉树藏族自治州': [97.02, 33.0],
    '海西蒙古族藏族自治州': [97.37, 37.37],
    '北京': [116.4, 39.9],
    '天津': [117.2, 39.12],
    '上海': [121.47, 31.23],
    '重庆': [106.55, 29.57],
    '海北藏族自治州': [100.9, 36.97],
    '银川': [106.28, 38.47],
    '石嘴山': [106.38, 39.02],
    '吴忠': [106.2, 37.98],
    '固原': [106.28, 36.0],
    '中卫': [105.18, 37.52],
    '乌鲁木齐': [87.62, 43.82],
    '克拉玛依': [84.87, 45.6],
    '吐鲁番': [89.17, 42.95],
    '哈密地区': [93.52, 42.83],
    '昌吉回族自治州': [87.3, 44.02],
    '博尔塔拉蒙古自治州': [82.07, 44.9],
    '巴音郭楞蒙古自治州': [86.15, 41.77],
    '阿克苏地区': [80.27, 41.17],
    '喀什地区': [75.98, 39.47],
    '和田地区': [79.92, 37.12],
    '伊犁哈萨克自治州': [81.32, 43.92],
    '塔城地区': [82.98, 46.75],
    '阿勒泰地区': [88.13, 47.85],
    '石河子': [86.03, 44.3],
    '阿拉尔': [81.28, 40.55],
    '图木舒克': [79.13, 39.85],
    '五家渠': [87.53, 44.17]
  }

  export default {
    data () {
      return {
        form: {
          apps: apps,
          plats: plats,
          timeSelect: '6h'
        },
        autorefresh: true,
        successmin: 95,
        hour: 6,
        plat: '',
        app: '无限极中国APP2.0',
        startsDateList: '',
        nowstarts: '',
        lastWeekStarts: '',
        requestDateList: '',
        lastWeekRequests: '',
        requestnum: '',
        successDateList: '',
        lastWeekSuccess: '',
        successnum: '',
        delayDateList: '',
        lastWeekDelay: '',
        delaynum: '',
        responseData: '',
        activeName: 'city',
        lineLoading: true,
        mapLoading: true,
        barLoading: true,
        requestLoading: true,
        successLoading: true,
        delayLoading: true,
        interval: null,
        second: 1000 * 60,
        echarts: {
          lineEchart: '',
          mapEchart: '',
          citiesEchart: '',
          areasEchart: '',
          requestEchart: '',
          successEchart: '',
          delayEchart: ''
        },
        slowestData: {
          citiesData: '',
          areaData: '',
          max: 0,
          ascmax: 0
        },
        styleColor: {
          nowColor: '#4793C0',
          lastWeekColor: '#999'
          // nowColor: '#3B73C3',
          // lastWeekColor: '#D1E87A'
          // lastWeekColor: '#2F4554'
          // slowestColor: '#359EE1'
        },
        errorList: {
          data: [],
          time: '',
          currPage: 1,
          pageSize: 10,
          totalCount: 0
        },
        optionVisible: false,
        urls: {
          listUrl: this.$http.adornUrl(baseUrl + '/dashboard/newlist'),
          refreshInfoUrl: this.$http.adornUrl(baseUrl + '/autorefresh/getByModule'),
          changeUrl: this.$http.adornUrl(baseUrl + '/autorefresh/changeStatus')
        }
      }
    },
    mounted () {
      // this.init()
    },
    activated () {
      this.init()
    },
    deactivated () {
      clearInterval(this.interval)
      this.interval = null
    },
    methods: {
      init () {
        var vm = this
        vm.autorefresh = true
        if (vm.interval !== null) {
          clearInterval(vm.interval)
          vm.interval = ''
        }
        vm.$http.get(vm.urls.refreshInfoUrl + '?module=数据大盘').then((response) => {
          var info = response.data
          if (info !== null) {
            vm.interval = setInterval(function () {
              vm.getPageData()
            }, vm.second)
          }
        })
        vm.getPageData()
      },
      changerefresh () {
        var vm = this
        if (vm.autorefresh) {
          vm.interval = setInterval(function () {
            vm.getPageData()
          }, vm.second)
        } else {
          clearInterval(vm.interval)
        }
      },
      getPageData () {
        var vm = this
        var url = vm.urls.listUrl + '?hour=' + vm.hour + '&plat=' + vm.plat
        vm.$http.get(url).then((response) => {
          var obj = response.data
          if (obj.code === 0) {
            vm.analyzeTrendsResponseData(obj) // 处理数据，分类
            vm.sortResponseData(obj.map) // 处理数据，分类
            vm.handleAreaData(obj.provinces)
            vm.initEcharts()
          }
        })
      },
      initEcharts () {
        var vm = this
        vm.echarts.requestEchart = echarts.init(document.getElementById('request-echart'))
        vm.echarts.successEchart = echarts.init(document.getElementById('success-echart'))
        vm.echarts.delayEchart = echarts.init(document.getElementById('delay-echart'))
        vm.echarts.lineEchart = echarts.init(document.getElementById('line-echart'))
        vm.echarts.mapEchart = echarts.init(document.getElementById('map-echart'))
        vm.echarts.citiesEchart = echarts.init(document.getElementById('slowest-cities-echart'))
        vm.echarts.areasEchart = echarts.init(document.getElementById('slowest-areas-echart'))

        vm.getTrendsEchart()
        vm.getLineEchart()
        vm.getMapEchart()
        vm.getSlowestEcharts(this.activeName)

        window.addEventListener('resize', () => {
          vm.echarts.requestEchart.resize()
          vm.echarts.successEchart.resize()
          vm.echarts.delayEchart.resize()
          vm.echarts.lineEchart.resize()
          vm.echarts.mapEchart.resize()
          vm.echarts.citiesEchart.resize()
          vm.echarts.areasEchart.resize()
        })
      },
      showErrorList () {
        var vm = this
        var params = []
        var url = '/codes/getErrorDetails'
        params.push('time=' + vm.errorList.time)
        if (vm.errorList.currPage !== '' && vm.errorList.currPage !== null) {
          params.push('currPage=' + vm.errorList.currPage)
        }

        if (vm.errorList.pageSize !== '' && vm.errorList.pageSize !== null) {
          params.push('pageSize=' + vm.errorList.pageSize)
        }
        url += (params.length > 0 ? '?' + params.join('&') : '')
        vm.$http({
          url: vm.$http.adornUrl(url),
          methods: 'get'
        }).then(({data}) => {
          console.log(data)
          if (data && data.code === 0) {
            vm.errorList.data = data.data.list
            vm.errorList.totalCount = data.data.totalCount
            vm.optionVisible = true
          }
        })
      },
      changHour (hour) {
        this.lineLoading = true
        this.mapLoading = true
        this.barLoading = true
        this.requestLoading = true
        this.successLoading = true
        this.delayLoading = true
        if (hour === '1h') {
          hour = 1
        } else if (hour === '6h') {
          hour = 6
        } else if (hour === '1d') {
          hour = 24
        } else if (hour === '8d') {
          hour = 192
        } else if (hour === '14d') {
          hour = 336
        } else if (hour === '30d') {
          hour = 720
        } else {
          hour = 0
        }
        this.hour = hour
        this.getPageData()
      },
      changPlat (plat) {
        this.lineLoading = true
        this.mapLoading = true
        this.barLoading = true
        this.requestLoading = true
        this.successLoading = true
        this.delayLoading = true
        this.plat = plat
        this.getPageData()
      },
      // 渲染启动数量图表
      getLineEchart () {
        var vm = this
        let isShow = vm.lastWeekStarts.length === 0
        var option = {
          title: [{
            text: '启动数量',
            left: '0',
            textStyle: {
              fontSize: 13
            }
          }, {
            show: isShow,
            text: '暂无数据',
            top: '42%',
            left: 'center',
            textStyle: {
              fontSize: 13
            }
          }],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 0,
            data: ['启动数量', '上周启动数量'],
            itemGap: 10
          },
          color: [vm.styleColor.nowColor, vm.styleColor.lastWeekColor],
          dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
          }],
          xAxis: {
            boundaryGap: false,
            data: vm.startsDateList,
            axisLabel: {
              formatter: function (params) {
                return params.replace(' ', '\n')
              }
            }
          },
          yAxis: {
            axisTick: {
              interval: 0
            },
            splitLine: {
              show: false
            }
          },
          grid: [{
            top: '12%',
            left: '50px',
            right: 20
          }],
          series: [{
            name: '启动数量',
            type: 'line',
            showSymbol: false,
            data: vm.nowstarts,
            lineStyle: {
              color: vm.styleColor.nowColor
            },
            markLine: {
              data: [{
                type: 'average',
                name: '平均值'
              }],
              label: {
                show: false
              },
              lineStyle: {
                color: vm.styleColor.nowColor
              }
            }
          },
          {
            name: '上周启动数量',
            type: 'line',
            showSymbol: false,
            data: vm.lastWeekStarts,
            lineStyle: {
              color: vm.styleColor.lastWeekColor
            },
            markLine: {
              data: [{
                type: 'average',
                name: '平均值'
              }],
              label: {
                show: false
              },
              lineStyle: {
                color: vm.styleColor.lastWeekColor
              }
            }
          }]
        }

        vm.echarts.lineEchart.setOption(option)
        vm.lineLoading = false
      },
     // 趋势数据
      getTrendsEchart () {
        var vm = this
        let isReShow = vm.requestnum.length === 0
        var option1 = {
          title: [{
            text: '请求数',
            left: '0',
            textStyle: {
              fontSize: 14
            }
          }, {
            show: isReShow,
            text: '暂无数据',
            top: '42%',
            left: 'center',
            textStyle: {
              fontSize: 13
            }
          }],
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            top: 0,
            data: ['请求数', '上周请求数'],
            itemGap: 10
          },
          color: [vm.styleColor.nowColor, vm.styleColor.lastWeekColor],
          dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
          }],
          xAxis: {
            boundaryGap: false,
            data: vm.requestDateList,
            axisLabel: {
              formatter: function (params) {
                return params.replace(' ', '\n')
              }
            }
          },
          yAxis: {
            axisTick: {
              interval: 0
            },
            splitLine: {
              show: false
            }
          },
          grid: [{
            top: '12%',
            left: '50px',
            right: 20
          }],
          series: [{
            name: '请求数',
            type: 'line',
            showSymbol: false,
            data: vm.requestnum,
            lineStyle: {
              color: vm.styleColor.nowColor
            },
            markLine: {
              data: [{
                type: 'average',
                name: '平均值'
              }],
              label: {
                show: false
              },
              lineStyle: {
                color: vm.styleColor.nowColor
              }
            }
          }, {
            name: '上周请求数',
            type: 'line',
            showSymbol: false,
            data: vm.lastWeekRequests,
            lineStyle: {
              color: vm.styleColor.lastWeekColor
            },
            markLine: {
              data: [{
                type: 'average',
                name: '平均值'
              }],
              label: {
                show: false
              },
              lineStyle: {
                color: vm.styleColor.lastWeekColor
              }
            }
          }]
        }
        let isNetShow = vm.successnum.length === 0
        var option2 = {
          title: [{
            text: '网络成功率 (%)',
            left: '0',
            textStyle: {
              fontSize: 14
            }
          }, {
            show: isNetShow,
            text: '暂无数据',
            top: '42%',
            left: 'center',
            textStyle: {
              fontSize: 13
            }
          }],
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              return params[0].name + '<br>' + params[0].marker + params[0].seriesName + ':' + params[0].value.toFixed(2)
            }
          },
          legend: {
            top: 0,
            data: ['成功率', '上周成功率'],
            itemGap: 10
          },
          color: [vm.styleColor.nowColor, vm.styleColor.lastWeekColor],
          dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
          }],
          xAxis: {
            boundaryGap: false,
            data: vm.successDateList,
            axisLabel: {
              formatter: function (params) {
                return params.replace(' ', '\n')
              }
            }
          },
          yAxis: {
            min: vm.successmin,
            axisTick: {
              interval: 0
            },
            splitLine: {
              show: false
            }
          },
          grid: [{
            top: '12%',
            left: '50px',
            right: 20
          }],
          series: [{
            name: '成功率',
            type: 'line',
            showSymbol: false,
            data: vm.successnum,
            lineStyle: {
              color: vm.styleColor.nowColor
            },
            markLine: {
              data: [{
                type: 'average',
                name: '平均值'
              }],
              label: {
                show: false
              },
              lineStyle: {
                color: vm.styleColor.nowColor
              }
            }
          }, {
            name: '上周成功率',
            type: 'line',
            showSymbol: false,
            data: vm.lastWeekSuccess,
            lineStyle: {
              color: vm.styleColor.lastWeekColor
            },
            markLine: {
              data: [{
                type: 'average',
                name: '平均值'
              }],
              label: {
                show: false
              },
              lineStyle: {
                color: vm.styleColor.lastWeekColor
              }
            }
          }]
        }
        let isDelayShow = vm.lastWeekDelay.length === 0
        var option3 = {
          title: [{
            text: '响应时间 (ms)',
            left: '0',
            textStyle: {
              fontSize: 14
            }
          }, {
            show: isDelayShow,
            text: '暂无数据',
            top: '42%',
            left: 'center',
            textStyle: {
              fontSize: 13
            }
          }],
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              return params[0].name + '<br>' + params[0].marker + params[0].seriesName + ':' + params[0].value.toFixed(2)
            }
          },
          legend: {
            top: 0,
            data: ['响应时间', '上周响应时间'],
            itemGap: 10
          },
          color: [vm.styleColor.nowColor, vm.styleColor.lastWeekColor],
          dataZoom: [{
            type: 'inside',
            start: 0,
            end: 100
          }],
          xAxis: {
            boundaryGap: false,
            data: vm.delayDateList,
            axisLabel: {
              formatter: function (params) {
                return params.replace(' ', '\n')
              }
            }
          },
          yAxis: {
            axisTick: {
              interval: 0
            },
            splitLine: {
              show: false
            }
          },
          grid: [{
            top: '12%',
            left: '50px',
            right: 20
          }],
          series: [{
            name: '响应时间',
            type: 'line',
            showSymbol: false,
            data: vm.delaynum,
            lineStyle: {
              color: vm.styleColor.nowColor
            },
            markLine: {
              data: [{
                type: 'average',
                name: '平均值'
              }],
              label: {
                show: false
              },
              lineStyle: {
                color: vm.styleColor.nowColor
              }
            }
          }, {
            name: '上周响应时间',
            type: 'line',
            showSymbol: false,
            data: vm.lastWeekDelay,
            lineStyle: {
              color: vm.styleColor.lastWeekColor
            },
            markLine: {
              data: [{
                type: 'average',
                name: '平均值'
              }],
              label: {
                show: false
              },
              lineStyle: {
                color: vm.styleColor.lastWeekColor
              }
            }
          }]
        }
        vm.echarts.requestEchart.setOption(option1)
        vm.echarts.successEchart.setOption(option2)
        vm.echarts.successEchart.on('click', function (params) {
          if (params.name === '平均值') {
            return
          }
          vm.errorList.time = params.name
          vm.showErrorList()
        })
        vm.echarts.delayEchart.setOption(option3)
        vm.requestLoading = false
        vm.successLoading = false
        vm.delayLoading = false
      },
      // 渲染国内响应地图
      getMapEchart () {
        var vm = this
        var option = {
          title: {
            text: '国内各地区响应时间',
            left: '0',
            textStyle: {
              fontSize: 14
            }
          },
          tooltip: {
            trigger: 'item',
            formatter: function (params) {
              return params.name + ' : ' + params.value[2].toFixed(2) + 'ms'
            }
          },
          legend: {
            orient: 'vertical',
            left: 50,
            top: 25,
            icon: 'circle',
            data: ['>=5000ms', '2000ms~5000ms', '1000ms~2000ms', '500ms~1000ms', '0ms~500ms']
          },
          // color: ['#26A85A', '#A2CE53', '#D9E948', '#FDC432', '#D94942'],
          color: ['#339205', '#67C23A', '#D9E948', '#FDC432', '#f44336'],
          geo: {
            map: 'china',
            label: {
              emphasis: {
                show: false
              }
            },
            itemStyle: {
              normal: {
                areaColor: '#EFEEEF',
                borderColor: '#777'
              },
              emphasis: {
                areaColor: '#ccc'
              }
            }
          },
          series: [
            {
              name: '0ms~500ms',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: vm.mergedData(vm.responseData.responseRank1),
              symbolSize: 8,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  borderColor: '#fff',
                  borderWidth: 1
                }
              }
            },
            {
              name: '500ms~1000ms',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: vm.mergedData(vm.responseData.responseRank2),
              symbolSize: 8,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  borderColor: '#fff',
                  borderWidth: 1
                }
              }
            },
            {
              name: '1000ms~2000ms',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: vm.mergedData(vm.responseData.responseRank3),
              symbolSize: 8,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  borderColor: '#fff',
                  borderWidth: 1
                }
              }
            },
            {
              name: '2000ms~5000ms',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: vm.mergedData(vm.responseData.responseRank4),
              symbolSize: 8,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  borderColor: '#fff',
                  borderWidth: 1
                }
              }
            },
            {
              name: '>=5000ms',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: vm.mergedData(vm.responseData.responseRank5),
              symbolSize: 8,
              label: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: false
                }
              },
              itemStyle: {
                emphasis: {
                  borderColor: '#fff',
                  borderWidth: 1
                }
              }
            }
          ]
        }
        vm.echarts.mapEchart.setOption(option)
        vm.mapLoading = false
      },
      // 渲染最慢城市图表
      getSlowestCitiesEcharts () {
        var vm = this
        let isShow = vm.slowestData.citiesData.length === 0
        var option = {
          title: {
            show: isShow,
            text: '暂无数据',
            top: '42%',
            left: 'center',
            textStyle: {
              fontSize: 13
            }
          },
          grid: [{
            top: 0,
            left: 0,
            bottom: 3,
            right: 59
          }],
          // color: [vm.styleColor.slowestColor],
          xAxis: {
            type: 'value',
            max: vm.max,
            splitLine: {show: false},
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {show: false}
          },
          yAxis: {
            type: 'category',
            data: vm.slowestData.citiesData.map(item => {
              return item.name
            }),
            axisLabel: {
              interval: 0,
              inside: true,
              margin: 0,
              padding: [0, 0, 22, 0]
            },
            splitLine: {show: false},
            axisLine: {show: false},
            axisTick: {show: false}
          },
          series: [{
            type: 'bar',
            stack: 'chart',
            z: 3,
            label: {
              normal: {
                position: 'right',
                show: true,
                formatter: function (item) {
                  return item.value.toFixed(2) + ' ms'
                }
              }
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value >= 5000) {
                    // return '#D94942'
                    return '#f44336'
                  } else if (params.value >= 2000 && params.value < 5000) {
                    return '#FDC432'
                  } else if (params.value >= 1000 && params.value < 2000) {
                    return '#D9E948'
                  } else if (params.value >= 500 && params.value < 1000) {
                    // return '#A2CE53'
                    return '#67C23A'
                  } else if (params.value >= 0 && params.value < 500) {
                    // return '#26A85A'
                    return '#339205'
                  }
                }
              }
            },
            barWidth: 8,
            data: vm.slowestData.citiesData.map(item => {
              return item.value
            })
          }, {
            type: 'bar',
            stack: 'chart',
            silent: true,
            itemStyle: {
              normal: {
                color: '#eee'
              }
            },
            barWidth: 8,
            data: vm.slowestData.citiesData.map(function (item) {
              return vm.slowestData.max - item.value
            })
          }]
        }

        vm.echarts.citiesEchart.setOption(option)
        vm.barLoading = false
      },
      // 渲染最慢省份图表
      getSlowestAreaEcharts () {
        var vm = this
        let isShow = vm.slowestData.areaData.length === 0
        var option = {
          title: {
            show: isShow,
            text: '暂无数据',
            top: '42%',
            left: 'center',
            textStyle: {
              fontSize: 13
            }
          },
          grid: {
            top: 0,
            left: 0,
            bottom: 3,
            right: 50
          },
          // color: [vm.styleColor.slowestColor],
          xAxis: {
            type: 'value',
            max: vm.ascmax,
            splitLine: {show: false},
            axisLine: {show: false},
            axisTick: {show: false},
            axisLabel: {show: false}
          },
          yAxis: {
            type: 'category',
            // data: Object.keys(vm.slowestData.areaData),
            data: vm.slowestData.areaData.map(function (item) {
              return item.name
            }),
            axisLabel: {
              interval: 0,
              inside: true,
              margin: 0,
              padding: [0, 0, 22, 0]
            },
            splitLine: {show: false},
            axisLine: {show: false},
            axisTick: {show: false}
          },
          series: [{
            type: 'bar',
            stack: 'component',
            z: 3,
            label: {
              normal: {
                position: 'right',
                show: true,
                formatter: function (item) {
                  return item.value.toFixed(2) + ' ms'
                }
              }
            },
            itemStyle: {
              normal: {
                color: function (params) {
                  if (params.value >= 5000) {
                    // return '#D94942'
                    return '#f44336'
                  } else if (params.value >= 2000 && params.value < 5000) {
                    return '#FDC432'
                  } else if (params.value >= 1000 && params.value < 2000) {
                    return '#D9E948'
                  } else if (params.value >= 500 && params.value < 1000) {
                    // return '#A2CE53'
                    return '#67C23A'
                  } else if (params.value >= 0 && params.value < 500) {
                    // return '#26A85A'
                    return '#339205'
                  }
                }
              }
            },
            barWidth: 8,
            data: vm.slowestData.areaData.map(function (item) {
              return item.value
            })
          }, {
            type: 'bar',
            stack: 'component',
            silent: true,
            itemStyle: {
              normal: {
                color: '#eee'
              }
            },
            barWidth: 8,
            data: vm.slowestData.areaData.map(function (item) {
              return vm.slowestData.ascmax - item.value
            })
          }]
        }
        vm.echarts.areasEchart.setOption(option)
        vm.barLoading = false
      },
      // 整理数据-合并、分类、排序
      sortResponseData (responseTimeData) {
        var vm = this
        // 分类后的数据(根本地图图例分段)
        var classifiedData = {
          responseRank1: [],
          responseRank2: [],
          responseRank3: [],
          responseRank4: [],
          responseRank5: []
        }
        for (let i in responseTimeData) {
          var time = responseTimeData[i].value
          if (time < 500) {
            classifiedData.responseRank1.push(responseTimeData[i])
          } else if (time >= 500 && time < 1000) {
            classifiedData.responseRank2.push(responseTimeData[i])
          } else if (time >= 1000 && time < 2000) {
            classifiedData.responseRank3.push(responseTimeData[i])
          } else if (time >= 2000 && time < 5000) {
            classifiedData.responseRank4.push(responseTimeData[i])
          } else {
            classifiedData.responseRank5.push(responseTimeData[i])
          }
        }
        vm.responseData = classifiedData
        // 排序后的数据(按照value排序，从大到小)
        var descData = lodash.sortBy(responseTimeData, function (item) {
          return -item.value
        })
        // 排序后的数据(按照value排序，从小到大)
        // var ascData = lodash.sortBy(responseTimeData, function (item) {
        //   return item.value
        // })
        // 从前到后获取数据的N为数据
        vm.slowestData.citiesData = lodash.take(descData, 10).reverse()
        // vm.slowestData.areaData = lodash.take(ascData, 10).reverse()
        vm.slowestData.max = descData[0].value
        // vm.slowestData.ascmax = descData[9].value
      },
      // 合并数据
      mergedData (data) {
        var mergedData = []
        for (let i = 0; i < data.length; i++) {
          var geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            mergedData.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value)
            })
          }
        }
        return mergedData
      },
      analyzeStartsResponseData (obj) {
        var timestamps = []
        var times = []
        var nows = []
        var lasts = []
        var lastobj = obj.laststarts
        for (let key in obj.starts) {
          var temp = parseFloat(key) - 1000 * 60 * 60 * 24 * 7
          timestamps.push(parseFloat(temp))
          times.push(moment(parseFloat(key)).format('YYYY-MM-DD HH:mm'))
          nows.push(obj.starts[key])
        }
        for (let k = 0; k < timestamps.length; k++) {
          var n = lastobj[timestamps[k]]
          lasts.push(n === undefined ? 0 : n)
        }
        this.startsDateList = times
        this.nowstarts = nows
        this.lastWeekStarts = lasts
      },
      analyzeTrendsResponseData (obj) {
        var data = obj.datas
        var lastdata = obj.lastDatas
        var startstimes = []
        var startsnum = []
        var requesttimes = []
        var requestnum = []
        var successtimes = []
        var successnum = []
        var delaytimes = []
        var delaynum = []

        // 启动数
        var startstimestamps = []
        var laststarts = []
        var stnums = lastdata.starts
        for (let start in data.starts) {
          var sttemp = parseFloat(start) - 1000 * 60 * 60 * 24 * 7
          startstimestamps.push(parseFloat(sttemp))
          startstimes.push(moment(parseFloat(start)).format('YYYY-MM-DD HH:mm'))
          startsnum.push(data.starts[start])
        }
        if (stnums !== undefined) {
          for (let t = 0; t < startstimestamps.length; t++) {
            var tn = stnums[startstimestamps[t]]
            laststarts.push(tn === undefined ? 0 : tn)
          }
        } else {
          for (let t = 0; t < startstimestamps.length; t++) {
            laststarts.push(0)
          }
        }
        this.lastWeekStarts = laststarts

        // 请求数
        var requesttimestamps = []
        var lastrequests = []
        var rnums = lastdata.request
        for (let request in data.request) {
          var rtemp = parseFloat(request) - 1000 * 60 * 60 * 24 * 7
          requesttimestamps.push(parseFloat(rtemp))
          requesttimes.push(moment(parseFloat(request)).format('YYYY-MM-DD HH:mm'))
          requestnum.push(data.request[request])
        }
        if (rnums !== undefined) {
          for (let r = 0; r < requesttimestamps.length; r++) {
            var rn = rnums[requesttimestamps[r]]
            lastrequests.push(rn === undefined ? 0 : rn)
          }
        } else {
          for (let r = 0; r < requesttimestamps.length; r++) {
            lastrequests.push(0)
          }
        }
        this.lastWeekRequests = lastrequests
        // 成功率
        var successtimestamps = []
        var lastsuccess = []
        var snums = lastdata.success
        for (let success in data.success) {
          var stemp = parseFloat(success) - 1000 * 60 * 60 * 24 * 7
          successtimestamps.push(parseFloat(stemp))
          successtimes.push(moment(parseFloat(success)).format('YYYY-MM-DD HH:mm'))
          successnum.push(data.success[success] * 100)
        }
        if (snums !== undefined) {
          for (let s = 0; s < successtimestamps.length; s++) {
            var sn = snums[successtimestamps[s]]
            lastsuccess.push(sn === undefined ? 0 : sn)
          }
        } else {
          for (let r = 0; r < successtimestamps.length; r++) {
            lastsuccess.push(0)
          }
        }
        this.lastWeekSuccess = lastsuccess

        // 延迟时间
        var delaytimestamps = []
        var lastdelay = []
        var dnums = lastdata.delay
        for (let delay in data.delay) {
          var dtemp = parseFloat(delay) - 1000 * 60 * 60 * 24 * 7
          delaytimestamps.push(parseFloat(dtemp))
          delaytimes.push(moment(parseFloat(delay)).format('YYYY-MM-DD HH:mm'))
          delaynum.push(data.delay[delay])
        }
        if (dnums !== undefined) {
          for (let d = 0; d < delaytimestamps.length; d++) {
            var dn = dnums[delaytimestamps[d]]
            lastdelay.push(dn === undefined ? 0 : dn)
          }
        } else {
          for (let r = 0; r < delaytimestamps.length; r++) {
            lastdelay.push(0)
          }
        }
        this.lastWeekDelay = lastdelay

        // 排序后的数据(按照value排序，从小到大)
        var sums = []
        sums = sums.concat(successnum)
        sums = sums.concat(lastsuccess)
        var minNum = Math.min.apply(null, sums)
        console.log(minNum)
        this.successmin = parseInt(minNum / 5) * 5
        this.requestDateList = requesttimes
        this.requestnum = requestnum
        this.successDateList = successtimes
        this.successnum = successnum
        this.delayDateList = delaytimes
        this.delaynum = delaynum
        this.nowstarts = startsnum
        this.startsDateList = startstimes
      },
      // 切换tabs
      handleClick (tab, event) {
        var vm = this
        vm.activeName = tab.name
        vm.getSlowestEcharts(vm.activeName)
      },
      // 获取对应的图表
      getSlowestEcharts (name) {
        var vm = this
        setTimeout(function () { // 为了让图表有宽高
          if (name === 'city') {
            vm.echarts.citiesEchart.resize()
            vm.getSlowestCitiesEcharts()
          } else if (name === 'area') {
            vm.echarts.areasEchart.resize()
            vm.getSlowestAreaEcharts()
          }
        }, 100)
      },
      // 版本关联平台
      relatedVersion (value) {
        var vm = this
        vm.form.version = ''
        var platforms = vm.form.platforms
        for (let i = 0; i < platforms.length; i++) {
          if (platforms[i].value === value) {
            vm.form.versions = platforms[i].versions
          }
        }
      },
      handleAreaData (data) {
        var vm = this
        var resultData = lodash.sortBy(data, function (item) {
          return -item.value
        })
        vm.slowestData.areaData = lodash.take(resultData, 10).reverse()
        vm.slowestData.ascmax = resultData[0].value
      },
      formatTime (row, column, cellValue, index) {
        if (cellValue !== null) {
          return moment(cellValue).format('YYYY-MM-DD HH:mm:ss')
        } else {
          return cellValue
        }
      },
      handleSizeChange (val) {
        this.errorList.pageSize = val
        this.showErrorList()
      },
      handleCurrentChange (val) {
        this.errorList.currPage = val
        this.showErrorList()
      }
    }
  }
</script>

<style scoped>
  .main-box .el-form {
    text-align: right;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
  }
  .main-box .el-form .sel-len .el-select{
    width: 100px;
  }
  .main-box .el-form .sel-len .el-radio-group{
    width: 290px;
  }
  .main-box .rate-box{
    overflow: hidden;
    margin-bottom: 20px;
  }
  .main-box .rate-box .rate-item{
    float: left;
    width: 19.36%;
    margin-right: 0.8%;
    border: 1px solid #eee;
    box-sizing: border-box;
    box-shadow: 2px 2px 4px #eee;
  }
  .main-box .rate-box .rate-item:last-child{
    margin-right: 0;
  }
  .main-box .rate-box .rate-item .rate-item-title{
    margin: 0;
    padding: 0.8em 0.6em;
    border-bottom:  1px solid #ddd;
  }
  .main-box .rate-box .rate-item .rate-item-title img{
    width: 16px;
    margin-top: -2px;
  }
  .main-box .rate-box .rate-item .rate-item-cont{
    overflow: hidden;
  }
  .main-box .rate-item .rate-item-cont .item-detail{
    float: left;
    width: 50%;
    margin: 1.4em 0;
  }
  .main-box .rate-item .rate-item-cont .item-detail .item-detail-name{
    padding-left: 1em;
  }
  .main-box .rate-item .rate-item-cont .item-detail .item-detail-img{
    width: 18px;
    margin-left: 0.5em;
  }
  .main-box .rate-item .rate-item-cont .item-detail .item-detail-type{
    display: block;
    color: #bbb;
    font-size: 12px;
    padding-top: 0.5em;
    padding-left: 1.17em;
  }
  .defined-close-btn{
    position: absolute;
    left: 15px;
    top: 17px;
  }
  .main-box .el-button{
    padding: 8px 15px;
    font-size: 14px;
  }
  .main-box .table-form-expand{
    font-size: 0;
  }
  .main-box .table-form-expand label {
    display: inline-block;
    width: 110px;
    color: #99a9bf;
    text-align: right;
    font-size: 14px;
    line-height: 40px;
    padding: 0 12px 0 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
  }
  .main-box .table-form-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
    text-align: left;
  }
  .main-box .table-form-expand .el-form-item.line-block{
    display: block;
    width: 100%;
  }
  .main-box .el-table__expanded-cell{
    text-align: left;
  }
</style>